@color-outter-border : #666666;
@color-outter-border-focus : #0c70a6;
@color-inner-border : black;
@color-bg : #232323;
@color-input : #aaa;
@color-unit : #ddd;
@color-button : #474747;
@color-bg-disabled : #3a3a3a;

:host {
  display: flex;
  position: relative;
  box-sizing: border-box;
  min-width: 60px;
  border: 1px solid @color-outter-border;
  cursor: default;
  background: @color-bg;
}

:host:focus {
  outline: none;
}

:host:hover {
  border: 1px solid @color-outter-border + 30%;
}
:host[focused] {
  border: 1px solid @color-outter-border-focus;
}

:host[invalid] {
  border: 1px solid red;
}

:host[disabled] {
  pointer-events: none;
  background: @color-bg-disabled;
}

:host[disabled] #input {
  color: @color-input - 50%;
}

:host[disabled] #input {
  pointer-events: none;
}

#input {
  display: block;
  padding: 2px 4px;
  border: 0;
  margin: 0;
  width: 100%;

  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: transparent;
  color: @color-input;

  pointer-events: auto;
  user-select: auto;
  cursor: auto;
  border: 1px solid black;
}

#input::-webkit-input-placeholder {
  font-style: italic;
  color: #666;
  text-shadow: none;
}

#input:focus {
  outline: none;
}

#input::selection {
  background: #007acc;
}

:host.mini #input {
  font-size: 0.6rem;
}

:host.small #input {
  font-size: 0.8rem;
}

:host #input {
  font-size: 1.0rem;
}

:host.large #input {
  font-size: 1.2rem;
}

:host.big #input {
  font-size: 1.4rem;
}

// readonly

:host[readonly] #input{
  -webkit-user-select: text;
  cursor: text;
}

.fa-times-circle {
  display: block;
  padding: 0;
  margin: -0.48em 0 0 0;

  position: absolute;
  top: 50%;
  right: 4px;
  cursor: pointer;
}

:host.mini .fa-times-circle {
  font-size: 0.6rem;
  height: 0.8em;
}

:host.small .fa-times-circle {
  font-size: 0.8rem;
  height: 1em;
}

:host .fa-times-circle {
  font-size: 1.0rem;
  height: 1.2em;
}

:host.large .fa-times-circle {
  font-size: 1.2rem;
  height: 1.6em;
}

:host.big .fa-times-circle {
  font-size: 1.4rem;
  height: 2em;
}

:host[cancelable] #input {
  padding-right: 1.4em;
}
